<!DOCTYPE html>
<html>
<head>
<title>Particle Decay Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>

<canvas id="physicsCanvas" width="800" height="450"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style Settings ---
// Mimic the hand-drawn/typewriter style of the original image
ctx.lineWidth = 2.5;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = "30px 'Courier New', monospace";
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';


// --- Define coordinates ---
const decayX = 320;
const decayY = 200;
const startX = 50;
const endX = 520;

// --- Drawing the diagram ---

// 1. Incoming Pion (π⁺) path
ctx.beginPath();
ctx.moveTo(startX, decayY);
ctx.lineTo(decayX, decayY);
ctx.stroke();

// Pion label (π⁺)
ctx.fillText('π⁺', 180, 250);

// 2. Decay products: Muon (μ⁺) and Neutrino (ν)

// Muon path (μ⁺), slightly downward
const muonEndY = decayY + 20;
ctx.beginPath();
ctx.moveTo(decayX, decayY);
ctx.lineTo(endX, muonEndY);
ctx.stroke();

// Muon label (μ⁺)
ctx.fillText('μ⁺', 420, 255);

// Neutrino path (ν), upward
const neutrinoEndY = decayY - 45;
ctx.beginPath();
ctx.moveTo(decayX, decayY);
ctx.lineTo(endX, neutrinoEndY);
ctx.stroke();

// Neutrino label (ν)
ctx.fillText('ν', 430, 150);

// 3. Angle (θ) representation
// Dashed line for horizontal reference
ctx.save();
ctx.beginPath();
ctx.setLineDash([7, 7]);
ctx.moveTo(decayX, decayY);
ctx.lineTo(decayX + 150, decayY);
ctx.stroke();
ctx.restore();

// Angle arc
const angleRadius = 60;
const neutrinoAngle = Math.atan2(neutrinoEndY - decayY, endX - decayX); // This will be a negative angle
ctx.beginPath();
ctx.arc(decayX, decayY, angleRadius, neutrinoAngle, 0);
ctx.stroke();

// Angle label (θ)
// Position the label within the arc
const angleLabelRadius = angleRadius * 0.65;
const angleLabelAngle = neutrinoAngle / 2;
const angleLabelX = decayX + angleLabelRadius * Math.cos(angleLabelAngle);
const angleLabelY = decayY + angleLabelRadius * Math.sin(angleLabelAngle);
ctx.fillText('θ', angleLabelX, angleLabelY);


// 4. Neutrino Detector
const detectorX = 580;
const detectorY = 90;
const detectorWidth = 200;
const detectorHeight = 120;

ctx.beginPath();
ctx.rect(detectorX, detectorY, detectorWidth, detectorHeight);
ctx.stroke();

// Detector text
ctx.font = "28px 'Courier New', monospace";
ctx.fillText('neutrino', detectorX + detectorWidth / 2, detectorY + 40);
ctx.fillText('detector', detectorX + detectorWidth / 2, detectorY + 80);


// 5. Figure Label
ctx.font = "24px 'Courier New', monospace";
ctx.fillText('Fig. 4.6', decayX + 80, 380);

</script>

</body>
</html>